<template>
    <section>
        <nav>
            <mt-swipe :auto="4000">
                <mt-swipe-item><img src="../../assets/images/轮播/fnav1.webp" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/images/轮播/fnav2.webp" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/images/轮播/fnav3.webp" alt=""></mt-swipe-item>
                <mt-swipe-item><img src="../../assets/images/轮播/fnav4.webp" alt=""></mt-swipe-item>
            </mt-swipe>
        </nav>
        <div class="products" v-cloak>
            <div class="kong"></div>
            <div class="top_title"><h4>心选精品</h4></div>
            <div class="about">
                <div class="idd">
                    <ul>
                    <li :class="{'active':id == index}" v-for="(item,index) in lists" :key="index" @click="id = index">
                        {{item}}
                    </li>
                    </ul>
                    <!-- -----zh----- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 0">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in zh_leftBox" :key="index">
                              <router-link to="/xxz">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                              </router-link>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in zh_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                    <!-- ----jk---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 1">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in jk_leftBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in jk_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                    <!-- ----rq---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 2">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in rq_leftBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in rq_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                    <!-- ----yz---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 3">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in yz_leftBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in yz_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                    <!-- ----hk---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 4">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in hk_leftBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in hk_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                    <!-- ----zx---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 5">
                        <div class="left_xin">
                            <div class="left_top"  v-for="(item,index) in zx_leftBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                        <div class="right_xin">
                            <div class="left_btom"  v-for="(item,index) in zx_rightBox" :key="index">
                                <div class="img_box" style="text-align:center"><img :src="item.imgSrc" style="width:89px"></div>
                                <p class="f_p">{{item.fP}}</p>
                                <p class="s_p">{{item.sP}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="botm_nav">
            <mt-swipe :show-indicators="false">
                <mt-swipe-item>
                    <div class="content" style="background-color:rgba(105,105,105,0.25)">
                        <div class="left_topT">
                            <p>
                              56L蒸烤一体机
                            </p>
                        </div>
                        <div class="right_topT">
                            <p>
                                智能云菜单<br>3D立体烘烤<br>一键童锁
                            </p>
                        </div>
                        <div class="cen_img">
                            <img src="../../assets/images/轮播/b1.webp" alt="">
                        </div>
                        <div class="price_tag">
                            <span><p>参考价:</p></span><p style="font-size:20px;font-weight:700">￥7999</p>
                        </div>
                    </div>
                </mt-swipe-item>
                <mt-swipe-item>
                      <div class="content" style="background-color:rgba(100,149,237,0.25)">
                        <div class="left_topT">
                            <p>
                              56L蒸烤一体机
                            </p>
                        </div>
                        <div class="right_topT">
                            <p>
                                智能云菜单<br>3D立体烘烤<br>一键童锁
                            </p>
                        </div>
                        <div class="cen_img">
                            <img src="../../assets/images/轮播/b2.webp" alt="">
                        </div>
                        <div class="price_tag">
                            <span><p>参考价:</p></span><p style="font-size:20px;font-weight:700">￥4999</p>
                        </div>
                    </div>
                </mt-swipe-item>
                <mt-swipe-item>
                      <div class="content" style="background-color:rgba(244,164,96,0.25)">
                        <div class="left_topT">
                            <p>
                              56L蒸烤一体机
                            </p>
                        </div>
                        <div class="right_topT">
                            <p>
                                智能云菜单<br>3D立体烘烤<br>一键童锁
                            </p>
                        </div>
                        <div class="cen_img">
                            <img src="../../assets/images/轮播/b3.webp" alt="">
                        </div>
                        <div class="price_tag">
                            <span><p>参考价:</p></span><p style="font-size:20px;font-weight:700">￥4999</p>
                        </div>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <!-- <video src="https://video.haier.com/masvod/public/2019/09/18/20190918_16d43ddf9fb_r1_800k.mp4"></video> -->
    </section>
</template>

<style scoped>
    [v-cloak]{
      display: none;
    }
    section{
      height:1500px;
    }
    nav{
        height:180px;
    }
    nav img,.mint-swip-items-wrap{
        height:180px;
    }
    .products{
        width:100%;
        /* height: 1500px; */
        height:630px;
        /* background:pink; */
    }
    .kong{
        width:100%;
        height:30px;
    }
    .top_title{
        width:100%;
        line-height:44px;
        text-align:center;
        padding:5px 0;
    }
    .top_title>h4{
        font-size:25px;
        font-weight:600;
    }
    .active{
    color:#0c5ca8;
    font-weight: bolder;
    border-bottom:2px solid #0c5ca8;
    }
    .idd{
    width: 100%;
    overflow: hidden;
    }
    .idd>ul{
        display: flex;
        align-items: center;
        overflow:auto;
        padding-left: 0;
        border-bottom:1px solid lightgray;
    }
    .idd>ul>li{
        text-align: center;
        font-size: 15px;
        padding: 0 10px 3px;
        margin: 0 4px;
        /* -ms-flex-negative: 0; */
        flex-shrink: 0;
    }
    .showBox{
        width:93%;
        height:500px;
        /* background:purple; */
        margin:10px 12px;
    }
    .left_xin,.right_xin{
        width:50%;
        height:482px;
        /* background:yellow; */
        float:left;
        display: flex;
        flex-direction:column;
    }
    .left_top:nth-of-type(1){
        padding:45px 0 45px;
        height:220px;
        background:rgba(190,190,190,0.25);
    }
    .left_top>a{
      color:#000;
      text-decoration: none;
    }
    .f_p{
        padding: 6px;
        text-align: center;
        font-size: 13px;
        overflow:hidden;
    }
    .s_p{
        padding: 10px;
        text-align: center;
        font-size: 10px;
    }
    .left_top:nth-of-type(1) img{
        width:152px;
    }
    .left_top:nth-of-type(2)>.img_box{
        padding-top:10px;
    }
    .left_btom>.img_box{
        padding-top:4px;
    }
    .left_top:nth-of-type(2) img{
        width:89px;
    }
    .left_top:nth-of-type(2){
        background:rgba(190,190,190,0.1)
    }
    .left_btom:nth-of-type(2){
      background:rgba(248,248,255);
    }
    .botm_nav{
        width:100%;
        height: 511px;
        background:rgba(190,190,190,0.25);
    }
    .botm_nav img{
        width:100%;
    }
    .content{
        z-index: 1;
        width:100%;
        height: 511px;
        background: url('../../assets/images/轮播/haier2019_starP_bg.webp') center center no-repeat;
        position:relative;
        background-size: 100%;
    }
    .left_topT{
        width:45%;
        height:100px;
        position:absolute;
        padding:10px;
        top:10%;
        /* background:red; */
        float:left;
    }
    .left_topT>p{
      font-size:20px;
      font-weight:500;
    }
    .right_topT{
        width:45%;
        height:50px;
        padding:10px;
        position:absolute;
        top:10%;
        right:0;
        /* background:yellow; */
    }
    .right_topT{
        font-size:10px;
        text-align: right;
    }
    .cen_img{
        width:100%;
        height:211px;
        position:absolute;
        top:30%;
        text-align: center;
        /* background: blue; */
    }
    .cen_img>img{
        width:270px;
    }
    .price_tag{
        width:40%;
        height:50px;
        /* background: pink; */
        position: absolute;
        bottom:5%;
        right:5%;
    }
    .price_tag>span{
        float: left;
    }
    .content p{
      color: white;
    }
    /* video{
      width:100%;
      height:100%;
    } */
</style>

<script>
export default{
  data() {
    return {
      id:0,
      lists:['智慧家电','健康抑菌','人气爆款','颜值控','黑科技','成套甄选'],
      zh_leftBox:"",
      zh_rightBox:"",
      jk_leftBox:"",
      jk_rightBox:"",
      rq_leftBox:"",
      rq_rightBox:"",
      yz_leftBox:"",
      yz_rightBox:"",
      hk_leftBox:"",
      hk_rightBox:"",
      zx_leftBox:"",
      zx_rightBox:""
    }
  },
  mounted(){
        this.$http.get('./data/xinxuan.json')
      .then((response)=> {
        console.log(response);
        this.zh_leftBox=response.data.zh_leftBox;
        this.zh_rightBox=response.data.zh_rightBox;
        this.jk_leftBox=response.data.jk_leftBox;
        this.jk_rightBox=response.data.jk_rightBox;
        this.rq_leftBox=response.data.rq_leftBox;
        this.rq_rightBox=response.data.rq_rightBox;
        this.yz_leftBox=response.data.yz_leftBox;
        this.yz_rightBox=response.data.yz_rightBox;
        this.hk_leftBox=response.data.hk_leftBox;
        this.hk_rightBox=response.data.hk_rightBox;
        this.zx_leftBox=response.data.zx_leftBox;
        this.zx_rightBox=response.data.zx_rightBox;
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
      }
}
</script>
